<template>
  <div class="main-outer">
    <div class="main-nav-list">
      <div class="content">
        <MainNavList />
      </div>
    </div>
    <div class="menu">
      <div class="search">
        <Search />
      </div>
      <div class="books-page">
        <div class="books-page-main">
          <div class="filter">
            <div class="filter-outer">
              <div class="header">图书分类</div>
              <ul class="classification">
                <li
                  :class="{
                    selected: currentSelectedClassification[0] == 0
                  }"
                >
                  <div @click="handleLevelClassificationClick(0, 1)">
                    全部
                  </div>
                </li>
                <li
                  v-for="level1 in threeLevelClassification"
                  :key="`level1${level1.id}`"
                  :class="{
                    selected:
                      currentSelectedClassification[0] == level1.id
                  }"
                >
                  <div
                    @click="
                      handleLevelClassificationClick(level1.id, 1)
                    "
                  >
                    {{ level1.name }}
                  </div>
                  <ul
                    class="child"
                    v-if="
                      currentSelectedClassification[0] == level1.id
                    "
                  >
                    <li
                      v-for="level2 in level1.children"
                      :key="`level2${level2.id}`"
                      :class="{
                        selected:
                          currentSelectedClassification[1] ==
                          level2.id
                      }"
                    >
                      <div
                        @click="
                          handleLevelClassificationClick(level2.id, 2)
                        "
                      >
                        {{ level2.name }}
                      </div>
                      <ul
                        class="child"
                        v-if="
                          currentSelectedClassification[1] ==
                          level2.id
                        "
                      >
                        <li
                          v-for="level3 in level2.children"
                          :key="`level3${level3.id}`"
                          :class="{
                            selected:
                              currentSelectedClassification[2] ==
                              level3.id
                          }"
                        >
                          <div
                            @click="
                              handleLevelClassificationClick(
                                level3.id,
                                3
                              )
                            "
                          >
                            {{ level3.name }}
                          </div>
                        </li>
                      </ul>
                    </li>
                  </ul>
                </li>
              </ul>
            </div>
            <div class="filter-outer">
              <div class="header">书籍状态</div>
              <ul class="single-check">
                <li>
                  <input
                    type="checkbox"
                    :checked="bookStatus == 60"
                    @click="handleStatusClick(60, 'bookStatus')"
                    id="bookStatus1"
                  />
                  <label for="bookStatus1">上市销售</label>
                </li>
                <li>
                  <input
                    type="checkbox"
                    :checked="bookStatus == 10"
                    @click="handleStatusClick(10, 'bookStatus')"
                    id="bookStatus2"
                  />
                  <label for="bookStatus2">诚招译者</label>
                </li>
                <li>
                  <input
                    type="checkbox"
                    :checked="bookStatus == 20"
                    @click="handleStatusClick(20, 'bookStatus')"
                    id="bookStatus3"
                  />
                  <label for="bookStatus3">正在翻译</label>
                </li>
                <li>
                  <input
                    type="checkbox"
                    :checked="bookStatus == 30"
                    @click="handleStatusClick(30, 'bookStatus')"
                    id="bookStatus4"
                  />
                  <label for="bookStatus4">正在写作</label>
                </li>
                <li>
                  <input
                    type="checkbox"
                    :checked="bookStatus == 46"
                    @click="handleStatusClick(46, 'bookStatus')"
                    id="bookStatus5"
                  />
                  <label for="bookStatus5">正在排版</label>
                </li>
                <li>
                  <input
                    type="checkbox"
                    :checked="bookStatus == 50"
                    @click="handleStatusClick(50, 'bookStatus')"
                    id="bookStatus6"
                  />
                  <label for="bookStatus6">正在印刷</label>
                </li>
              </ul>
            </div>
            <div class="filter-outer">
              <div class="header">其他</div>
              <ul class="single-check">
                <li>
                  <input
                    type="checkbox"
                    :checked="otherStatus == 1"
                    @click="handleStatusClick(1, 'otherStatus')"
                  />
                  <label>免费</label>
                </li>
                <li>
                  <input
                    type="checkbox"
                    :checked="otherStatus == 2"
                    @click="handleStatusClick(2, 'otherStatus')"
                  />
                  <span>可兑换样书</span>
                </li>
              </ul>
            </div>
            <div class="filter-outer">
              <div class="header">出版日期</div>
              <div class="block">
                <el-date-picker
                  v-model="monthrange"
                  type="monthrange"
                  range-separator="-"
                  start-placeholder="开始"
                  end-placeholder="结束"
                  size="small"
                  style="width: 150px"
                >
                </el-date-picker>
              </div>
            </div>
            <div class="filter-outer">
              <div class="header">热门标签</div>
              <div class="all-tag">
                <span v-html="hotTag"></span>
              </div>
            </div>
          </div>
          <div class="main">
            <div class="header">
              <el-input
                placeholder="请输入内容"
                size="mini"
                v-model="bookNameSearchInput"
                clearable
                style="width: 340px"
              >
              </el-input>
              <button class="search-button">搜索</button>
              <div class="number-text">
                共有{{ totalCount }}本图书
              </div>
              <a>生成当前书单链接</a>
            </div>
            <div class="classification">
              <ul>
                <li
                  :class="{ selectd: edtionSaletypeStatus == 0 }"
                  @click="handleEdtionSaletypeStatusClick(0)"
                >
                  纸质书
                </li>
                <li
                  :class="{ selectd: edtionSaletypeStatus == 1 }"
                  @click="handleEdtionSaletypeStatusClick(1)"
                >
                  电子书
                </li>
                <li
                  :class="{ selectd: edtionSaletypeStatus == 2 }"
                  @click="handleEdtionSaletypeStatusClick(2)"
                >
                  预售
                </li>
                <li
                  :class="{ selectd: edtionSaletypeStatus == 3 }"
                  @click="handleEdtionSaletypeStatusClick(3)"
                >
                  抢读
                </li>
              </ul>
              <dl>
                <dt>排序方式</dt>
                <dd
                  :class="{ selected: sortType == 0 }"
                  @click="handleSortTypeClick(0)"
                >
                  最新
                </dd>
                <dd
                  :class="{ selected: sortType == 1 }"
                  @click="handleSortTypeClick(1)"
                >
                  最热
                </dd>
                <dd
                  :class="{ selected: sortType == 2 }"
                  @click="handleSortTypeClick(2)"
                >
                  推荐
                </dd>
              </dl>
            </div>
            <div
              v-if="!bookItems || bookItems.length == 0"
              class="book-list"
              v-loading="isLoading"
            >
              <div class="text">暂无数据</div>
            </div>
            <div v-else class="book-list" v-loading="isLoading">
              <OneBook
                v-for="book in bookItems"
                :key="book.isbn"
                :book="book"
              />
            </div>
            <div class="pagination">
              <el-pagination
                layout="prev, pager, next"
                @current-change="handlePageChange"
                :total="totalCount"
                :page-size="15"
                :current-page="currentPage"
              >
              </el-pagination>
            </div>
          </div>
        </div>
        <div class="footer">
          <Footer />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import Footer from '../../components/Footer'
import MainNavList from '../../components/MainNavList'
import Search from '../../components/Search'
import OneBook from '../../components/OneBook'

import API from '../../API/BooksPage'

export default {
  name: 'BooksPage',
  data() {
    return {
      // 加载状态
      isLoading: false,

      // 书籍状态
      bookStatus: -1,

      // 其他状态
      otherStatus: 0,

      // 日期间隔
      monthrange: '',

      // 书名搜索输入框
      bookNameSearchInput: '',

      // 一下是三级分类的数据
      // 三级分类详情数组
      threeLevelClassification: [],
      // 不是响应式的
      // 记录当前用户点击
      currentSelectedClassification: [0, -1, -1],
      // 记录用户最近点击 图书分类id
      currentClassificationId: 0,

      // 热门标签 全是html 标签 👴表示很无语
      hotTag: '',

      //  edtion saletype
      edtionSaletypeStatus: 0,

      // 排序方式
      sortType: 0,

      // 当前页码
      currentPage: 1,
      // 总数量
      totalCount: 100,

      // 全部书籍信息
      bookItems: []
    }
  },
  methods: {
    handleStatusClick(num, name) {
      if (this[name] == num) {
        this[name] = -1
        return
      }
      this[name] = num
      this.reqGetAdvancedBook()
    },
    handleLevelClassificationClick(id, level) {
      if (this.currentSelectedClassification[level - 1] == id) {
        // 一个函数内vue.set尽量不要用两次
        Vue.set(
          this.currentSelectedClassification,
          level - 1,
          level == 1 ? 0 : -1
        )
        this.currentClassificationId =
          level == 1
            ? 0
            : this.currentSelectedClassification[level - 2]
        this.reqGetAdvancedBook()
        return
      }
      Vue.set(this.currentSelectedClassification, level - 1, id)
      this.currentClassificationId = id
      this.reqGetAdvancedBook()
    },
    handleEdtionSaletypeStatusClick(status) {
      this.edtionSaletypeStatus = status
      this.reqGetAdvancedBook()
    },
    handleSortTypeClick(status) {
      this.sortType = status
      this.reqGetAdvancedBook()
    },
    handlePageChange(page) {
      this.currentPage = page
      this.reqGetAdvancedBook()
    },
    async reqGetAdvancedBook() {
      this.isLoading = true
      this.bookItems = []
      window.scrollTo(0, 0)
      const advancedRes = await API.reqGetAdvancedBook(
        this.advancedBookPostData
      )
      this.isLoading = false
      this.bookItems = advancedRes.bookItems
      this.currentPage = advancedRes.pagination.pageNumber
      this.totalCount = advancedRes.pagination.totalItemCount
    }
  },
  components: {
    Footer,
    MainNavList,
    Search,
    OneBook
  },
  async mounted() {
    const [allCategory, hotTag] = await Promise.all([
      API.reqGetAllCategory(),
      API.reqGetEditableArea(),
      this.reqGetAdvancedBook()
    ])
    this.threeLevelClassification = Object.freeze(allCategory)
    this.hotTag = Object.freeze(hotTag.content)
  },
  computed: {
    advancedBookPostData() {
      const postData = {
        categoryId: this.currentClassificationId,
        name: this.bookNameSearchInput,
        page: this.currentPage
      }

      // 书籍状态
      if (this.bookStatus != -1) {
        postData.bookStatus = this.bookStatus
      }

      // 其他状态
      switch (this.otherStatus) {
        case 1:
          postData.isFree = true
          break
        case 2:
          postData.isGiftBook = true
          break
        default:
          break
      }

      // 销售状态(saleType) 和 编辑状态(edition)
      switch (this.edtionSaletypeStatus) {
        case 0:
          postData.edition = 1
          break
        case 1:
          postData.edition = 4
          break
        case 2:
          postData.saleType = 1
          break
        case 3:
          postData.saleType = 0
          break
        default:
          break
      }

      // 分类状态
      switch (this.sortType) {
        case 0:
          postData.sort = 'new'
          break
        case 1:
          postData.sort = 'hot'
          break
        case 2:
          postData.sort = 'vote'
          break
        default:
          break
      }

      return postData
    }
  }
}
</script>

<style lang="less" scoped>
.main-outer {
  display: flex;
  position: relative;
  width: 100%;
  .main-nav-list {
    box-sizing: border-box;
    position: relative;
    top: 0;
    min-height: 100vh;
    min-width: 171px;
    border-right: 1px solid #cedce4;
    background-color: white;
    z-index: 2;
    .content {
      position: fixed;
      top: 16px;
      width: 140px;
    }
  }
  .menu {
    flex-grow: 1;
    display: flex;
    height: 100%;
    flex-direction: column;
    z-index: 1;
    .search {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 56px;
      background: #fff;
      border-bottom: 1px solid #cedce4;
      z-index: 1;
    }
  }
}
.books-page {
  position: relative;
  width: 100%;
  min-height: calc(100% - 56px);
  display: flex;
  flex-direction: column;
}

.filter {
  .filter-outer {
    width: 215px;
    padding: 10px 0;
    border-bottom: 1px solid #cedce4;
    .header {
      font-weight: bold;
      font-size: 16px;
    }
    .classification > li {
      font-size: 14px;
      color: #333;
      padding-left: 16px;
      margin-top: 12px;
      cursor: pointer;
    }
    .classification > li:hover > div {
      color: #4684e2;
    }
    .child > li {
      padding-left: 16px;
      font-size: 14px;
      margin-top: 4px;
    }
    .child > li:hover > div {
      color: #4684e2;
    }
    .single-check > li {
      padding: 5px 0;
    }
    .all-tag {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      a {
        border-radius: 9px;
        margin: 5px;
        border: 1px solid #a2aec6;
        border-radius: 5px;
        font-size: 12px;
        cursor: pointer;
      }
      a:hover {
        color: white;
        background-color: #4684e2;
      }
    }
    .selected > div {
      color: #4684e2;
    }
  }
}

.books-page-main {
  padding: 57px 134px 0px;
  display: flex;
  .main {
    padding: 10px 0;
    flex-grow: 1;
    flex-shrink: 1;
    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .search-button {
        width: 70px;
        height: 25px;
        background-color: #288dda;
        color: white;
        outline: none;
        border: none;
        border-radius: 12.5px;
      }
      .number-text {
        font-size: 12px;
        color: #999;
      }
      a {
        font-size: 12px;
        color: #289be5;
      }
    }
    .classification {
      margin-top: 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      ul {
        display: flex;
        li {
          cursor: pointer;
          margin: 0 5px;
          color: #5f77a6;
          font-size: 18px;
        }
        li.selectd {
          font-weight: bold;
          color: #152844;
          padding: 0;
          border-bottom: 5px solid #4684e2;
        }
      }
      dl {
        display: flex;
        width: 200px;
        align-items: center;
        justify-content: space-around;
        dt {
          color: #6c6c6c;
          font-size: 14px;
        }
        dd {
          cursor: pointer;
          color: #999;
          font-size: 14px;
        }
        dd.selected {
          color: #152844;
          border-bottom: 5px solid #4684e2;
        }
      }
    }
    .book-list {
      margin-top: 20px;
      display: flex;
      flex-wrap: wrap;
      div.text {
        height: 100px;
        width: 100%;
        text-align: center;
        font-size: 22px;
        font-weight: bold;
      }
      .newBook-oneBook {
        margin: 10px 10px;
        width: 255px;
        text-align: center;
        .oneBookImg {
          width: 255px;
          height: 156px;
          border-radius: 5px 5px 0 0;
          background-color: rgb(234, 241, 245);
          img {
            width: 102.25px;
            height: 140px;
            margin-top: 8px;
            border-radius: 5px;
          }
        }
        .oneBook-text {
          height: 104px;
          padding-top: 10px;
          border-radius: 0 0 5px 5px;
          background-color: rgb(246, 249, 251);
          .oneBook-name {
            display: block;
            font-size: 16px;
            padding-bottom: 10px;
          }
          p {
            font-size: 12px;
            color: rgb(128, 124, 124);
          }
          .oneBook-translator {
            margin-top: 3px;
          }
        }
      }
    }
    .pagination {
      text-align: center;
    }
  }
}
</style>
